<template>
  <el-dropdown class="lang-switcher" @command="onLangSelect">
    <el-button :size="btnSize">
      {{ langName }}
      <i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item of langList"
        :key="item.value"
        :command="item.value"
        @click="onLangSelect(item.value)"
      >
        {{ item.label }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: "LangSwitcher",
  props: {
    btnSize: {
      type: String,
      default: "mini",
      validator(val) {
        return [undefined, "default", "mini"].includes(val);
      },
    },
    lang: {
      type: String,
      default() {
        return this.$t("LANGS.Lang");
      },
    },
  },
  computed: {
    langName() {
      const target = this.langList.find((item) => item.value === this.lang);
      if (target) {
        return target.label;
      }
      return "";
    },
    langList() {
      const ctx = this;
      return [
        {
          value: "zh-CN",
          label: ctx.$t("LANGS.ZhCN"),
        },
        {
          value: "en",
          label: ctx.$t("LANGS.En"),
        },
      ];
    },
  },
  methods: {
    onLangSelect(value) {
      this.$emit("on-change", value);
      location.reload();
    },
  },
};
</script>

<style scoped lang="scss">
.lang-switcher {
  position: absolute;
  top: 0;
  right: 0;
  color: #333;
  cursor: pointer;
  background-color: transparent;
  opacity: 0.5;
}
</style>
